<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script src="../../assets/libs/jquery.min.js"></script>
<script language="javascript">
$(function(){ 
    jQuery.fn.extend({ 
        showWordCount: function() { 
            var _max = $(this).attr('max');
            var _length = $(this).text().length;
            if(_length > _max) {
                $(this).text($(this).text().substring(0, _max));
            }
            _left = $(this).offset().left;
            _top = $(this).offset().top;
            _width = $(this).width();
            _height = $(this).height();
            $('#div_1').html(_length + '/' + _max);
            $('#div_1').css({
                'left':_left + _width - 60,
                'top':_top + _height - 8
            });
        } 
    });
    
    $('textarea').bind('propertychange', function() {
        $(this).showWordCount();
    });
    
    $('textarea').focus(function(){ 
        $(this).showWordCount();
        $('#div_1').fadeIn('slow');
    });
    
    $('textarea').blur(function(){
           $('#div_1').fadeOut('slow');
    });
});
</script>
<style>
.div_1 {
    position:absolute;
    font-size:9pt;
    color:#4586b5;
    width:50px;
    text-align:right;
    display:none
}
</style>
</head>

<body>
<center>
<textarea id="textarea_1" cols=50 rows=10 data-max="100">123</textarea>
<div id="div_1" class="div_1">123</div>
</center>
</body>
</html>